<!--
 *
 * @Description:
 *
 * @Author: JZT.邓方舟
 * @Date: 2021-10-21 13:53:48
 * @Last Modified by: JZT.邓方舟
 * @Last Modified time: 2021-11-18 09:46:02
-->
<template>
  <div>
    <div class="nav">
      <div class="nav-warp">
        <div class="logo-box">
          <img width="46px" src="../../assets/images/logo-small.png" alt="" />
        </div>
        <div class="btn-left">
          <nuxt-link to="/">
            <div class="data-serch">首页</div>
          </nuxt-link>
          <nuxt-link to="/dataQuery">
            <div class="home">数据查询</div>
          </nuxt-link>
        </div>
        <div class="btn-right">
          <div class="to-login">
            <nuxt-link to="/login">
              <span style="color: #fff"
                >登录&nbsp; <span style="color:#666">|</span></span
              >
              <span style="color: #fe721d">&nbsp; 注册</span></nuxt-link
            >
          </div>
        </div>
      </div>
    </div>
    <div class="banner"></div>
    <div class="detail-content">
      <div class="lfet-nav">
        <!--
        <el-menu
          :default-active="acitve"
          class="el-menu-vertical-demo"
          active-text-color="#263C92"
          text-color="#888"
          @open="handleOpen"
        >

          <el-submenu index="1">
            <template slot="title">
              <div class="nav-title">
                <i class="el-icon-location"></i>
                <span>基本信息</span>
              </div>
            </template>

            <el-menu-item-group>

              <el-menu-item index="1-1" @click="details('1-1')"
                >主要基本信息</el-menu-item
              >
              <el-menu-item index="1-2" @click="details('1-2')"
                >功能信息</el-menu-item
              >
              <el-menu-item index="1-3" @click="details('1-3')"
                >开启方式参数</el-menu-item
              >
              <el-menu-item index="1-4" @click="details('1-4')"
                >侦测报警信息</el-menu-item
              >
              <el-menu-item index="1-5" @click="details('1-5')"
                >出厂信息</el-menu-item
              >
              <el-menu-item index="1-6" @click="details('1-6')"
                >产品图片及操作</el-menu-item
              >
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="2">
            <template slot="title">
              <div class="nav-title">
                <i class="el-icon-location"></i>
                <span>锁结构</span>
              </div>
            </template>
            <el-menu-item-group>
              <el-menu-item index="2-1" @click="details('2-1')"
                >锁结构基本信息</el-menu-item
              >
              <el-menu-item index="2-2" @click="details('2-2')"
                >锁体信息</el-menu-item
              >
              <el-menu-item index="2-3" @click="details('2-3')"
                >锁结构图片</el-menu-item
              >
            </el-menu-item-group>
          </el-submenu>

          <el-submenu index="3">
            <template slot="title">
              <div class="nav-title">
                <i class="el-icon-document"></i>
                <span>锁电子信息</span>
              </div>
            </template>


            <el-menu-item-group>
              <el-menu-item index="3-1" @click="details('3-1')"
                >主板集成</el-menu-item
              >
              <el-menu-item index="3-2" @click="details('3-2')"
                >指纹头模组</el-menu-item
              >
              <el-menu-item index="3-3" @click="details('3-3')"
                >人脸模组</el-menu-item
              >
              <el-menu-item index="3-4" @click="details('3-4')"
                >通信模组</el-menu-item
              >
              <el-menu-item index="3-5" @click="details('3-5')"
                >摄像头模组</el-menu-item
              >
              <el-menu-item index="3-6" @click="details('3-6')"
                >主控芯片</el-menu-item
              >
              <el-menu-item index="3-7" @click="details('3-7')"
                >触摸模组</el-menu-item
              >
              <el-menu-item index="3-8" @click="details('3-8')"
                >刷卡芯片</el-menu-item
              >
              <el-menu-item index="3-9" @click="details('3-9')"
                >电源芯片</el-menu-item
              >
              <el-menu-item index="3-10" @click="details('3-10')"
                >电机驱动芯片</el-menu-item
              >
              <el-menu-item index="3-11" @click="details('3-11')"
                >加密芯片</el-menu-item
              >
            </el-menu-item-group>
          </el-submenu>

          <el-submenu index="4">
            <template slot="title">
              <div class="nav-title">
                <i class="el-icon-document"></i>
                <span>锁芯信息</span>
              </div>
            </template>
            <el-menu-item-group>
              <el-menu-item index="4-1" @click="details('4-1')"
                >锁芯信息</el-menu-item
              >
            </el-menu-item-group>
          </el-submenu>



        </el-menu>
        -->

        <div class="left-title">
          <p
            :class="[leftTitle == 1 ? 'left-active' : '']"
            @click="leftTable(1)"
          >
            基本信息
          </p>
          <p
            :class="[leftTitle == 2 ? 'left-active' : '']"
            @click="leftTable(2)"
          >
            锁结构
          </p>
          <p
            :class="[leftTitle == 3 ? 'left-active' : '']"
            @click="leftTable(3)"
          >
            锁电子信息
          </p>
          <p
            :class="[leftTitle == 4 ? 'left-active' : '']"
            @click="leftTable(4)"
          >
            锁芯信息
          </p>
        </div>
      </div>
      <div class="right-info">
        <el-tabs v-model="activeInfo" v-if="leftTitle == 1">
          <el-tab-pane label="主要基本信息" name="first">
            <mainBasicInfo :basicInfoData="basicInfoData"></mainBasicInfo>
          </el-tab-pane>
          <el-tab-pane label="功能信息" name="second"
            ><functionInfo :basicInfoData="basicInfoData"></functionInfo
          ></el-tab-pane>
          <el-tab-pane label="开启方式参数" name="third">
            <lockDoorInfo :basicInfoData="basicInfoData"></lockDoorInfo>
          </el-tab-pane>
          <el-tab-pane label="侦测报警信息" name="fourth">
            <detectAlarmInfo :basicInfoData="basicInfoData"></detectAlarmInfo>
          </el-tab-pane>
          <el-tab-pane label="出厂信息" name="five">
            <initialInfo :basicInfoData="basicInfoData"></initialInfo>
          </el-tab-pane>
          <el-tab-pane label="产品图片及操作" name="six">
            <productImages :basicInfoData="basicInfoData"></productImages>
          </el-tab-pane>
        </el-tabs>
        <el-tabs v-model="lockInfoName" v-if="leftTitle == 2">
          <el-tab-pane label="锁结构基本信息" name="lockInfofirst">
            <lockBodyBasicInfo
              :basicInfoData="basicInfoData"
            ></lockBodyBasicInfo>
          </el-tab-pane>
          <el-tab-pane label="锁体信息" name="lockInfosecond">
            <lockBodyInfo :basicInfoData="basicInfoData"></lockBodyInfo>
          </el-tab-pane>
          <el-tab-pane label="锁结构图片" name="lockInfothird">
            <lockBodyImages :basicInfoData="basicInfoData"></lockBodyImages
          ></el-tab-pane>
        </el-tabs>

        <el-tabs v-model="mainBoardInfo" v-if="leftTitle == 3">
          <el-tab-pane label="主板信息" name="mainBoardInfoFirst">
            <lockELLockBodyInfo
              :basicInfoData="basicInfoData"
            ></lockELLockBodyInfo>
          </el-tab-pane>

          <el-tab-pane label="主控芯片" name="mainBoardInfoSecond">
            <lockELCore :basicInfoData="basicInfoData"></lockELCore>
          </el-tab-pane>
          <el-tab-pane label="锁模组信息" name="mainBoardInfoThird">
            <lockModelInfo :basicInfoData="basicInfoData"></lockModelInfo
          ></el-tab-pane>
          <el-tab-pane label="锁电子信息" name="mainBoardInfofouth">
            <lockELCoreInfo :basicInfoData="basicInfoData"></lockELCoreInfo>
          </el-tab-pane>
        </el-tabs>

        <el-tabs v-model="LockCylinderInfo" v-if="leftTitle == 4">
          <el-tab-pane label="锁芯信息" name="LockCylinderInfoFirst">
            <lockCoreInfo :basicInfoData="basicInfoData"></lockCoreInfo>
          </el-tab-pane>
        </el-tabs>

        <lockELLockBodyInfo
          :basicInfoData="basicInfoData"
          v-if="acitve == '3-1'"
        ></lockELLockBodyInfo>
        <lockELFinger
          :basicInfoData="basicInfoData"
          v-if="acitve == '3-2'"
        ></lockELFinger>
        <lockELFace
          :basicInfoData="basicInfoData"
          v-if="acitve == '3-3'"
        ></lockELFace>
        <lockELNetMethod
          :basicInfoData="basicInfoData"
          v-if="acitve == '3-4'"
        ></lockELNetMethod>
        <lockELVedio
          :basicInfoData="basicInfoData"
          v-if="acitve == '3-5'"
        ></lockELVedio>
        <lockELCore
          :basicInfoData="basicInfoData"
          v-if="acitve == '3-6'"
        ></lockELCore>

        <lockELTouch
          :basicInfoData="basicInfoData"
          v-if="acitve == '3-7'"
        ></lockELTouch>
        <lockELCardCore
          :basicInfoData="basicInfoData"
          v-if="acitve == '3-8'"
        ></lockELCardCore>
        <lockELSourceCore
          :basicInfoData="basicInfoData"
          v-if="acitve == '3-9'"
        ></lockELSourceCore>
        <lockELPowerCore
          :basicInfoData="basicInfoData"
          v-if="acitve == '3-10'"
        ></lockELPowerCore>
        <lockELPasswordCore
          :basicInfoData="basicInfoData"
          v-if="acitve == '3-11'"
        ></lockELPasswordCore>

        <lockCoreInfo
          :basicInfoData="basicInfoData"
          v-if="acitve == '4-1'"
        ></lockCoreInfo>
      </div>
    </div>
    <pageFooter></pageFooter>
  </div>
</template>
<script>
import mainBasicInfo from "./conponents/mainBasicInfo.vue";
import functionInfo from "./conponents/functionInfo.vue";
import lockDoorInfo from "./conponents/lockDoorInfo.vue";
import detectAlarmInfo from "./conponents/detectAlarmInfo.vue";
import initialInfo from "./conponents/initialInfo.vue";
import productImages from "./conponents/productImages.vue";
import lockBodyBasicInfo from "./conponents/lockBodyBasicInfo.vue";
import lockBodyInfo from "./conponents/lockBodyInfo.vue";
import lockBodyImages from "./conponents/lockBodyImages.vue";
import lockELLockBodyInfo from "./conponents/lockELLockBodyInfo.vue";
import lockELFinger from "./conponents/lockELFinger.vue";
import lockELFace from "./conponents/lockELFace.vue";
import lockELNetMethod from "./conponents/lockELNetMethod.vue";
import lockELVedio from "./conponents/lockELVedio.vue";

import lockELCore from "./conponents/lockELCore.vue";
import lockELTouch from "./conponents/lockELTouch.vue";
import lockELCardCore from "./conponents/lockELCardCore.vue";
import lockELSourceCore from "./conponents/lockELSourceCore.vue";
import lockELPowerCore from "./conponents/lockELPowerCore.vue";
import lockELPasswordCore from "./conponents/lockELPowerCore.vue";

import lockModelInfo from "./lockModelInfo.vue";
import lockELCoreInfo from "./lockELCoreInfo.vue";
import lockCoreInfo from "./conponents/lockCoreInfo.vue";
import pageFooter from "../components/footer";
export default {
  components: {
    mainBasicInfo,
    functionInfo,
    lockDoorInfo,
    detectAlarmInfo,
    initialInfo,
    productImages,
    lockBodyBasicInfo,
    lockBodyInfo,
    lockBodyImages,
    lockELLockBodyInfo,
    lockELFinger,
    lockELFace,
    lockELNetMethod,
    lockELVedio,
    lockELCore,
    lockELTouch,
    lockELCardCore,
    lockELSourceCore,
    lockELPowerCore,
    lockELPasswordCore,

    lockModelInfo,
    lockELCoreInfo,

    lockCoreInfo,
    pageFooter
  },
  data() {
    const query = this.$route.query;
    return {
      id: query.id,
      basicInfoData: {},
      acitve: "1-1",
      leftTitle: 1,
      activeInfo: "first",
      lockInfoName: "lockInfofirst",
      lockELName: "lockELfirst",
      lockCoreName: "lockCorefirst",
      LockCylinderInfo: "LockCylinderInfoFirst",
      mainBoardInfo: "mainBoardInfoFirst"
    };
  },
  mounted() {
    this.getDetail();
  },
  methods: {
    leftTable(e) {
      this.leftTitle = e;
      if (e == 1) {
        this.activeInfo = "first";
      } else if (e == 2) {
        this.lockInfoName = "lockInfofirst";
      } else if (e == 3) {
        this.mainBoardInfo = "mainBoardInfoFirst";
      } else if (e == 4) {
        this.LockCylinderInfo = "LockCylinderInfoFirst";
      }
    },
    details(e) {
      console.log(e);
      this.acitve = e;
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    getDetail() {
      const params = {
        id: this.id
      };
      this.$axios
        .$get("/blade-mansion/lockinfo/detail", {
          params
        })
        .then(res => {
          if (res.success) {
            this.basicInfoData = res.data;
          }
        });
    }
  }
};
</script>
<style scoped>
.nav {
  width: 100%;
  height: 80px;
  box-sizing: border-box;
  padding-right: 160px;
  padding-left: 160px;
  display: flex;
  justify-content: flex-end;

  background: #313131;
}

.nav-warp {
  width: calc(100% - 565px);
  height: 100%;
  display: flex;
  align-items: center;
}

.logo-box {
  position: absolute;
  left: 320px;
  top: 20px;
}
.btn-left {
  width: 50%;
  display: flex;
  align-items: center;
}
.home {
  width: 135px;
  cursor: pointer;
  height: 59px;
  font-size: 20px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.data-serch {
  width: 135px;
  cursor: pointer;
  height: 59px;
  font-size: 20px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-right {
  width: 50%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.to-login {
  width: 135px;
  height: 59px;
  font-family: Microsoft YaHei;
  cursor: pointer;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}

.banner {
  width: 100%;
  height: 230px;
  background: url("../../assets/images/2.png") no-repeat center/100%;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
}
.el-img {
  width: 100%;
  height: 300px;
}

.button {
  width: 110px;
  height: 100%;
  background: #263c92;
  border-radius: 0px 4px 4px 0px;
  outline: none;
  border: none;
  color: #ffffff;
  font-size: 20px;
}
.detail-content {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding-right: 160px;
  padding-left: 160px;
  display: flex;
  margin-top: 62px;
}
.lfet-nav .el-menu {
  border: 1px solid #b1b7ca;
}
.lfet-nav {
  width: 200px;
  margin-right: 37px;
}
.detail-content /deep/.el-icon-arrow-down {
  display: none !important;
}
.right-info {
  width: 100%;
  height: 100%;
}
.nav-title {
  background: #263c92;
  padding: 0 12px;
  color: #fff;
}
/deep/.el-submenu__title {
  padding: 0 !important;
}
.left-title {
  width: 200px;
  border: 1px solid #ccc;
}
.left-title p {
  height: 47px;
  line-height: 47px;
  text-align: center;
  border-bottom: 1px solid #ccc;
  color: #263c92;
  cursor: pointer;
}
.left-title p:last-child {
  border-bottom: none;
}
.left-title .left-active {
  background-color: #263c92;
  color: #fff;
}
/deep/.el-tabs__nav .el-tabs__item.is-active{
  color: #263C92;
}
 /deep/.el-tabs__nav  .el-tabs__active-bar{
  background-color: #263C92;
  height: 3px;
}
</style>
